<template>
    <div class="module3">
        <div v-show="selected" id="container"></div>
        <div v-show="!selected" class="personnelInfo">
            <div class="item" v-for="(item, i) in info" :key="i">
                <header>{{item.community}}</header>
                <div class="personnels">
                    <div v-for="(value, j) in item.governanceStaff" :key="j">
                        <img src="../assets/img/7.png" alt="">
                        <ul>
                            <li>
                                <span>姓名：</span>
                                <span>{{value.name}}</span>
                            </li>
                            <li>
                                <span>职务：</span>
                                <span>{{value.job}}</span>
                            </li>
                            <li>
                                <span>编号：</span>
                                <span>{{value.num}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <img @click="selected = !selected" src="../assets/img/55.png"/>
    </div>
</template>

<script>
import AMap from 'AMap'
import defImg from '../assets/img/default.png'
export default {
    name: "module3",
    data() {
        return {
            map: null,
            selected: true,
            info: [
                {
                    community: "金凯地小区", 
                    governanceStaff: [
                        {name: "朱凯华", job: "巡检员", num: "1"},
                        {name: "杨雅萍", job: "社区治理员", num: "2"},
                        {name: "费红英", job: "街道治理员", num: "4"},
                        {name: "郭楼儿", job: "镇域治理员", num: "3"},
                    ]
                },
                {
                    community: "尖家兜小区", 
                    governanceStaff: [
                        {name: "韩清坤", job: "巡检员", num: "5"},
                        {name: "江海金", job: "社区治理员", num: "6"},
                        {name: "杨红军", job: "街道治理员", num: "7"},
                        {name: "郭楼儿", job: "镇域治理员", num: "3"},
                    ]
                },
                {
                    community: "浔溪秀城小区", 
                    governanceStaff: [
                        {name: "吴戴", job: "巡检员", num: "8"},
                        {name: "葛正祥", job: "社区治理员", num: "9"},
                        {name: "钱国英", job: "街道治理员", num: "10"},
                        {name: "郭楼儿", job: "镇域治理员", num: "3"},
                    ]
                },
            ]
        }
    },
    mounted() {
        this.mapInitialize();
    },
    methods: {
        mapInitialize() {
            this.map = new AMap.Map("container", {
                resizeEnable: true,
                mapStyle: "amap://styles/darkblue",
                center: [120.41752,30.872897],
                zoom: 13
            });
            this.getMarker()
        },
        /* 获取点标记 */
        getMarker() {
            let inglats = [
                [120.411512,30.865847],
                [120.403683,30.868016],
                [120.424443,30.863161]
            ]
            // let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(-1, -30)});
            let icon = new AMap.Icon({
                size: new AMap.Size(25 , 34),
                image: defImg,
                /* imageOffset: new AMap.Pixel(0, -60), */
                imageSize: new AMap.Size(25 , 34),
            });
            console.log(icon)
            for(let i = 0; i < inglats.length; i++) {
                let marker = new AMap.Marker({
                    icon: icon,
                    position: inglats[i],
                    /* offset: new AMap.Pixel(0 , 0) */
                    offset: new AMap.Pixel(-14, -30)
                })
                marker.content = `
                <p class='input-item' style="font-size: 14px">电话 : 010-84107000   邮编 : 100102</p>
                <p class='input-item' style="font-size: 14px">地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>
                `;
                this.map.add(marker)
                marker.on('click', (e)=> {
                    let {target: {_position}} = e;
                    this.$emit("mapInfo", _position);
                    // infoWindow.setContent(e.target.content);
                    // infoWindow.open(this.map, e.target.getPosition());
                });
            }
        }
    }
}
</script>

<style scoped>
.module3 {
    height: 100%;
    position: relative;
}
#container {
    width: 100%;
    height: 100%;
}
.personnelInfo {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}
.personnelInfo .item {
    padding: 0 24px;
    margin-bottom: 12px;
    background-color: rgba(0, 0, 1, .5);
}
.personnelInfo .item:nth-last-of-type(1) {
    margin-bottom: 0;
}
.personnelInfo .item header {
    color: #82D2EF;
    font-size: 14px;
    padding: 12px 0;
}
.personnelInfo .item .personnels {
    display: flex;
    align-items: center;
    padding-bottom: 12px;
}
.personnels >div {
    flex: 1;
    padding-right: 12px;
    display: flex;
}
.personnels >div img {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
}
.personnels >div ul {
    color: #fff;
    font-size: 12px;
    padding-left: 6px;
}
.module3 >img {
    width: 35px;
    position: absolute; 
    right: 0;
    top: 0; 
    z-index: 20000
}
</style>